<template>
  <div class="min-h-screen flex flex-col">
    <Navbar />
    <main class="flex-grow relative">
      <router-view></router-view>
    </main>
    <Footer v-if="isShow" />
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { useRoute } from "vue-router";
import Navbar from "@/components/Navbar.vue";
import Footer from "@/components/Footer.vue";

const route = useRoute();
const isShow = ref(true);
watch(route, (val) => {
  const mainBox = document.querySelector(".main-box");
  if (val.path == "/") {
    isShow.value = false;
  } else {
    isShow.value = true;
  }
});
</script>

<style>
@import "@/styles/main.css";
body::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
</style>
